<template>
		<el-aside style=" background: #3cadeb;box-shadow: 2px 0 6px rgba(0,0,0,0.1);height: 98vh;width: 20%;max-width: 300px;min-width: 190px;">
		  <el-image :src="logoURL"></el-image>
		  <el-menu
		    router
			:default-active="$route.path"
		    active-background-color="#2a7aad"
			:openeds.sync="openedMenus" 
		    style="height: 85%; margin-bottom: 3%; background-color: #3cadeb;"
		    text-color="#fff" 
		    active-text-color="#3cadeb"
		  >
		    <el-submenu index="1">
		      <template slot="title">
		        <i class="el-icon-message"></i>
		        <span>课程管理</span>
		      </template>
		      <el-menu-item index="/ChooseCourse" style="background-color: #89cbec;">· 在线选课</el-menu-item>
			  <el-menu-item index="/CourseView" style="background-color: #89cbec;">· 课表查询</el-menu-item>
		    </el-submenu>
		  
		    <el-submenu index="2">
		      <template slot="title">
		        <i class="el-icon-menu"></i>
		        <span>成绩管理</span>
		      </template>
		      <el-menu-item index="/ScoreView" style="background-color: #89cbec;">· 考试成绩</el-menu-item>
		    </el-submenu>
		  
		    <el-submenu index="3">
		      <template slot="title">
		        <i class="el-icon-setting"></i>
		        <span>教室查询</span>
		      </template>
		      <el-menu-item index="/FreeRoomView" style="background-color: #89cbec;">· 空闲教室查询</el-menu-item>
		    </el-submenu>
		  
		    <el-submenu index="4">
		      <template slot="title">
		        <i class="el-icon-setting"></i>
		        <span>个人信息管理</span>
		      </template>
			  <el-menu-item index="/SelfInfoView" style="background-color: #89cbec;">· 个人信息维护</el-menu-item>
		      <el-menu-item index="/CardView" style="background-color: #89cbec;">· 校园卡流水</el-menu-item>
			  <el-menu-item index="/PasswordModifyView" style="background-color: #89cbec;">· 密码修改</el-menu-item>
		    </el-submenu>
		  </el-menu>
		</el-aside>
</template>

<style scoped>
    /deep/ .el-submenu__title,
    /deep/ .el-menu-item {
        color: #fff !important;
        background-color: #3cadeb !important; /* 添加默认背景色 */
    }
    
    /deep/ .el-submenu__title i {
        color: #fff !important;
    }
    
    /* 悬停时修改背景色 */
    /deep/ .el-menu-item:hover,
    /deep/ .el-submenu__title:hover {
        background-color: #2a7aad !important;
        color: #fff !important; /* 保持文字颜色不变 */
    }
    
    /* 激活项保持原样式 */
    /deep/ .el-menu-item.is-active {
        background-color: #2a7aad !important;
        color: #ffffff !important;
    }
</style>

<script>
export default {
    data() {
        return {
            logoURL: require("@/assets/" + "eSchool.jpg"),
			routeParentMap: {  
			        '/ChooseCourse': '1',
			        '/SelfInfoView': '4',
			        '/CardView': '4',
					'/PasswordModifyView': '4',
					'/ScoreView': '2',
					'/FreeRoomView': '3',
					'/CourseView':'1'
			      },
			openedMenus: [],  // 动态控制展开的菜单
        }
    },
	methods:{

	},
	 watch: {
	    // 监听路由变化
	    '$route.path': {
	      immediate: true,  // 立即触发以处理初始状态
	      handler(newPath) {
	        const parentMenu = this.routeParentMap[newPath]
	        if (parentMenu) {
	          this.openedMenus = [parentMenu]  // 仅展开当前路由对应的父菜单
	        }
	      }
	    }
	  },
}
</script>